<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    添加对应的依赖 -->
    <script src="/pages/base.js"></script>
    <!--    ztree 的css -->
    <link rel="stylesheet" href="/css/zTreeStyle.css" type="text/css">

    <!--    ztree 对应的js -->
    <script type="text/javascript" src="/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>

</head>
<body>

<div id="app">
    <!--
        ul标签
        id          唯一标识  treeDemo
        ztree       样式
    -->
    <ul id="treeDemo" class="ztree"></ul>
    <button onclick="btn1()">获取 指定的节点 1 </button>
    <button onclick="btn2()">获取 指定的节点 2 </button>
    <button>获取 指定的节点 3 </button>

</div>

<script>
    //1. ztree的设置
    var setting = {
        check: {
            enable: true,
            chkStyle:"checkbox", // 添加生效
            chkboxType:{
                Y:"s",
                N:"ps"
            }
            //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数]
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    // 02 nodes 节点
    var zNodes =[
        { id:1, pId:0, name:"系统操作", open:true},
        { id:2, pId:1, name:"用户管理", open:true},
        { id:4, pId:2, name:"用户管理添加"},
        { id:5, pId:2, name:"用户管理删除"},
        { id:6, pId:2, name:"用户管理修改"},
        { id:7, pId:2, name:"用户管理查询"},

        { id:3, pId:1, name:"角色管理", open:true},
        { id:8, pId:3, name:"角色管理添加"},
        { id:9, pId:3, name:"角色管理删除"}
    ];

    let zTree = null;

    // 拿到ztree 初始化
    function init(){
        // id选择器的使用
        zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }

    init();

    function btn1(){
        // 获取选中的节点
        //tree提供了获取所选CheckBox的节点数组方法 var nodes = treeObj.getCheckedNodes(true);
        let nodes = zTree.getCheckedNodes(true);

        for (let i = 0 ; i < nodes.length ; i ++){
            if (nodes[i].isParent){
                console.log(nodes[i])
            }else{
                console.log(nodes[i]);
            }
        }
    }

    function btn2(){
        // 以及每个节点都有是否含有子节点的判断元素check_Child_State
        // 所以我们只需要快速高效提取check_Child_State == -1 的节点即可
        let nodes = zTree.getCheckedNodes(true);
        console.log(nodes);

        //获取为选中的子节点
        nodes = $.grep(nodes, function(obj) {
                return obj.check_Child_State == -1;
        });
        console.log(nodes);

        if (nodes.length>0){
            let flag = nodes[0].isParent;
            console.log(flag);
        }

        let p = nodes[0].getParentNode();
        console.log(p);

        // //解决半选pid传入的问题
        // var nodes = zTree.transformToArray(zTree.getNodes());
        // console.log(nodes);
        // let arr =[];
        // for (key in nodes){
        //     console.log(nodes[key]);
        //     if(nodes[key].check_Child_State==-1&&nodes[key].checked==true){
        //         arr.push(nodes[key]);
        //     }
        // }
        // console.log(arr);
        // let pids = [];
        // for (let i = 0; i < arr.length; i++) {
        //     // 遍历选中的 节点的id
        //     pids.push(arr[i].id);
        // }
        // console.log(pids);
    }

</script>

</body>
</html>